<template>
  <div class="iframe-topology">
    <TopologyMap :topology="topologyData" />
  </div>
</template>

<script setup>
import TopologyMap from '@/components/TopologyMap.vue'
import { ref, onMounted } from 'vue'

const topologyData = ref([])

onMounted(() => {
  console.log('子页面已加载，开始监听消息')

  window.addEventListener('message', (event) => {
    console.log('收到消息:', event.origin, event.data)

    if (event.data && event.data.type === 'updateTopology') {
      console.log('更新拓扑数据:', event.data.topology)
      topologyData.value = event.data.topology
    }
  })
})
</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.iframe-topology {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>
